<template>
	<view class="classification">
		<view class="tab_nav1">
			<nav-bar nav_btn="back" :showShare="true" @inputMethods="fresher" :placeholder="placeholder" :color="color"
				type="two" :auto_img="img"></nav-bar>
		</view>
		<view class="tabbar">
			<tab-bar :type="type"></tab-bar>
		</view>
		<view class="content_box w100 h100 flex">
			<view class="left_scroll">
				<scroll-view :scroll-top="scrollTop" :show-scrollbar="true" scroll-y="true" class="scroll-Y"
					:style="'height:'+height+ 'px;'">
					<view
						:class="[listIndex == index ? 'shu_box_active' : 'shu_box','s28','familythree','f400','txtali']"
						v-for="(item,index) in goodsList" :key="index" @click="classStatus(item,index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<view class="right_box">
				<view class="screen_list_box flex">
					<view class="list_box flex" v-for="(item,index) in screen_list" :key="index"
						@click="onActive(index)">
						<view :class="[listIndexTwo == index ? 'active_txt' : '', 'txt s24 f500 family']">
							{{item.txt}}
						</view>
						<image class="img" :src="listIndexTwo == index ?item.img1:item.img" mode=""></image>
					</view>
					<view class="flex align-center" @click="open" style="margin-right: 34rpx;">
						<view class="" style="font-size: 24rpx;color: #666;">
							筛选
						</view>
						<view class="" style="font-size: 0;">
							<image style="width: 20rpx;height: 20rpx;" src="/pages/filePages/static/xs.png" mode="">
							</image>
						</view>
					</view>
				</view>
				<block>
					<scroll-view :scroll-top="scrollTop" @scrolltolower="scrolltolower" scroll-y="true"
						class="scroll-Y bot" :style="'height:'+height2+ 'px;'">
						<view class="ifcation_box">
							<!-- <view class="title_fd_box flex">
								<view class="gd_txt s26 family f500" @click="getClassGoods(item.id)">
									更多 >
								</view>
							</view> -->
							<!-- <view class="goods_list_box flex">
								<view class="goods_box" v-for="(items,indexs) in childrenList" :key="indexs">
									<view class="goods_image_box">
										<image class="w100 h100" :src="items.image_src" mode=""></image>
									</view>
									<view class="goods_name s24 family f500">
										{{items.title}}
									</view>
								</view>
							</view> -->
							<view class="goods_list_box" v-for="(items,indexs) in childrenList" :key="indexs"
								@click="goGoodsDetail(items)">
								<view class="left_goods_box">
									<image class="w100 h100" :src="items.image_src" mode="aspectFill" style="border-radius: 12rpx;"></image>
								</view>
								<view class="right_goods_detail">
									<view class="goods_name_txt">
										{{items.title}}
									</view>
									<view class="goods_price_box">
										<view class="goods_price_left familytow fblod s28">
											<text style="font-size: 12px;font-family: PingFang SC;font-weight: 400;">￥</text>{{items.price}}
										</view>
										<view class="goods_price_right s20 family f400">
											￥{{items.market_price}}
										</view>
									</view>
									<view class="goods_sales_hp flex">
										<view class="sales_txt s20 f400 family">
											销量 {{items.sales}}
										</view>
										<view class="line_box"></view>
										<block v-if="items.comment == 0">
											<view class="hp_txt s20 f400 family">
												暂无评价
											</view>
										</block>
										<block v-else>
											<view class="hp_txt s20 f400 family">
												好评率 {{items.comment}}%
											</view>
										</block>
									</view>
								</view>
								<view class="bottom_line">

								</view>
							</view>
						</view>
					</scroll-view>
				</block>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="fixed">
			<uni-popup ref="popup" type="right" background-color="#1B1B1B">
				<view class="" style="height: 100vh;display: flex;flex-direction: column;">
					<view class="" style="height: 110rpx;">

					</view>
					<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"> -->
					<view class="scroll-YS">
						<view class="right_popup_box">
							<view class="content_box2" style="padding-bottom: 40rpx;">
								<!-- <view class="flex">
									<view
										:class="[ranKingIndex == index ? 'header_box_active' : 'header_box','s24','family','f400','txtali']"
										v-for="(item,index) in ranKingList" :key="index" @click="ranQie(index)">
										{{item.name}}
									</view>
								</view> -->
								<!-- <view class="price_range_box">
									<view class="price_range_title s26 familytow fblod">
										价格区间
									</view>
									<view class="price_range_box flex">
										<input class="price_min_box txtali" placeholder-class="s22 family f400"
											placeholder-style="color:rgba(255, 255, 255, 0.5);" type="number"
											placeholder="最低价" />
										<view class="xian"></view>
										<input class="price_max_box txtali" placeholder-class="s22 family f400"
											placeholder-style="color:rgba(255, 255, 255, 0.5);" type="number"
											placeholder="最高价" />
									</view>
								</view> -->
								<!-- 子分类 -->
								<!-- @click="switchCard(index, indexs)" -->
								<!-- <view class="goods_type_box" v-if="classList.state.length > 0">
									<view class="goods_type_title s26 familytow fblod">子分类</view>
									<view class="goods_type_list flex">
										
										<view
											:class="[items.checkedd ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in classList.state"
											:key="indexs"
											@click="handleStateBrank(items)"
										>
											{{ items.name }}
										</view>
									</view>
								</view> -->
								<!-- 品牌 -->
								<view class="goods_type_box" v-if="classList.brand.length > 0">
									<view class="goods_type_title s26 familytow fblod">品牌</view>
									<view class="goods_type_list flex">

										<view
											:class="[items.checkedd ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in classList.brand" :key="indexs"
											@click="handleStateBrank(items)">
											{{ items.name }}
										</view>
									</view>
								</view>
								<!-- 属性 -->
								<!-- <view class="goods_type_box" v-for="(item, index) in classList.attribute" :key="index">
									<view class="goods_type_title s26 familytow fblod">{{ item.name }}</view>
									<view class="goods_type_list flex">
										<view
											:class="[items.flag ? 'lists_box_active' : 'lists_box', 's24', 'family', 'f400', 'txtali']"
											v-for="(items, indexs) in item.value"
											:key="indexs"
											@click="switchCard(index, indexs)"
										>
											{{ items.name }}
										</view>
									</view>
								</view> -->
								<!-- <view class="goods_type_box">
									<view class="goods_type_title s26 familytow fblod">
										能效等级
									</view>
									<view class="goods_type_list flex">
										<view class="lists_box s24 family f400 txtali" v-for="(item,index) in 3"
											:key="index">
											占位
										</view>
									</view>
								</view> -->
								<view class="goods_type_box">
									<view class="goods_type_title s26 familytow fblod">属性</view>
								</view>
								<view class="bottom_list_box">
									<view class="header_bot_txt"
										:style="{ height: item.type ? '100%' : '32rpx', overflow: item.type ? '' : 'hidden' }"
										v-for="(item, index) in classList.attribute" :key="index">
										<view class="flexjus">
											<view class="left_txt s22 family f500">{{ item.name }}</view>
											<view class="genduo_txt s20 family f500" @click="falgType(index)">
												{{ item.typeName }}
												<uni-icons :type="item.icon" color="#FFF" size="10"
													style="margin-left: 6upx;"></uni-icons>
											</view>
										</view>
										<!-- <view class=""> -->
										<view class="content_list flexjus">
											<block v-for="(items, indexs) in item.value" :key="indexs">
												<view
													:class="[items.flag ? 'content_list_box_active' : 'content_list_box', 'txtali', 's24', 'family', 'f400']"
													@click="switchCardTwo(index, indexs)">
													{{ items.name }}
												</view>
											</block>
										</view>
										<!-- </view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
					<view class="bottom_box flex">
						<view class="left_btn s26 family f500 txtali" @click="reset">重置</view>
						<view class="right_btn s26 family f500 txtali" @click="toUpdate">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import screenList from '@/components/screen.vue';
	export default {
		components: {
			screenList
		},
		data() {
			return {
				listIndex: 0,
				listIndexTwo: 0,
				list: {},
				childrenList: [],
				goodsList: [],
				type: 'three',
				title: '',
				color: 'white',
				img: '../pages/filePages/static/left_jian_back.png',
				placeholder: '畅销洗发水',
				screen_list: [{
						img: '/static/shopping/jiage.png',
						img1: '/static/Group 3815.png',
						txt: '价格'
					}, {
						img: '/static/shopping/zuixin.png',
						img1: '/static/Group 3817.png',
						txt: '最新'
					}, {
						img: '/static/shopping/pingfen.png',
						img1: '/static/Group 3814.png',

						txt: '爆款'
					},
					{
						img: '/static/shopping/renqi.png',
						img1: '/static/Group 3816.png',
						txt: '评分'
					}
				],
				//页面内容的高度
				height: 0,
				height2: 0,
				// 商品列表参数
				sort: 'asc',
				sortType: 'views',
				page: 1,
				last_page: 0,
				keywords: '',
				classId: '',
				// 筛选
				catId: 0,
				classList: null
			}
		},
		onLoad() {
			this.getHeight();
			this.getGoodList()
			//获取商品列表

			// 筛选
			this.getSearch();
		},
		methods: {
			// 筛选
			getSearch() {
				let that = this;
				that.$request({
					url: 'product/search',
					method: 'POST',
					data: {
						category_id: that.catId,
					}
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.attribute.forEach(key => {
							key.type = false;
							key.typeName = '展开';
							key.icon = 'bottom';
							key.value.forEach(items => {
								items.flag = false;
							});
						});
						that.classList = res.data.data;
						// 子分类
						// 品牌
						that.classList.brand.forEach(items => {
							items['checkedd'] = false
						})
						this.getGoodsList();
					}
				});
			},
			// 筛选属性展开收起
			falgType(index) {
				this.classList.attribute[index].type = !this.classList.attribute[index].type;
				this.classList.attribute[index].typeName == '展开' ? (this.classList.attribute[index].typeName = '收起') : (
					this.classList.attribute[index].typeName = '展开');
				this.classList.attribute[index].icon == 'bottom' ? (this.classList.attribute[index].icon = 'top') : (this
					.classList.attribute[index].icon = 'bottom');
			},
			// 筛选点击品牌
			handleStateBrank(item) {
				item.checkedd = !item.checkedd
				this.$forceUpdate()
			},
			// 筛选选择属性
			switchCardTwo(index, indexs) {
				this.classList.attribute[index].value[indexs].flag = !this.classList.attribute[index].value[indexs].flag;
			},
			// 筛选重置
			reset() {
				let that = this;
				that.classList.attribute.forEach(item => {
					item.value.forEach(items => {
						items.flag = false;
					});
				});
				that.classList.state.forEach(item => {
					item['checkedd'] = false
				});
				that.classList.brand.forEach(item => {
					item['checkedd'] = false
				});
				this.$refs.popup.close();
				//获取商品列表
				this.page = 1;
				this.getGoodsList();

			},
			// 筛选确认
			toUpdate() {
				this.$refs.popup.close();
				//获取商品列表
				this.page = 1;
				this.getGoodsList();
			},
			open() {
				this.$refs.popup.open('right');
			},
			// 搜索
			fresher(e) {
				this.keywords = e.detail.value;
				this.getGoodsList();
			},
			getHeight() {
				this.height = uni.getWindowInfo().screenHeight + 3;
				this.height2 = uni.getWindowInfo().screenHeight + 3;
				setTimeout(() => {
					const query = wx.createSelectorQuery();
					query.select(".tab_nav1").boundingClientRect(data => {
						this.height -= data.height;
						this.height2 -= data.height;
					}).exec()
					const query1 = wx.createSelectorQuery();
					query1.select(".tabbar").boundingClientRect(data => {
						this.height -= data.height;
						this.height2 -= data.height;
					}).exec()
					const query2 = wx.createSelectorQuery();
					query2.select(".screen_list_box").boundingClientRect(data => {
						this.height2 -= data.height;
					}).exec()
				}, 0)
			},
			onActive(index) {
				if (this.listIndexTwo == index) {
					this.sort == 'asc' ? this.sort = 'desc' : this.sort = 'asc';
				}
				this.listIndexTwo = index;
				this.listIndexTwo == 2 ? this.sortType = 'views' :
					this.listIndexTwo == 1 ? this.sortType = 'createtime' :
					this.listIndexTwo == 0 ? this.sortType = 'price' :
					this.listIndexTwo == 3 ? this.sortType = 'comment' : '';
				this.getGoodsList();
			},
			goGoodsDetail(item) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + item.id + '&type=0'
				})
			},
			getClassGoods(id) {
				uni.navigateTo({
					url: '/pages/filePages/storePages/classGoods?id=' + this.listIndex
				})
			},
			//获取分类id
			getGoodList(id) {
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				that.$request({
					url: 'Product/get_cat_goods',
					data: {
						shop_id: that.$store.state.shop.id
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.goodsList = res.data.data
						uni.hideLoading()
					}
				})
			},
			//获取商品列表
			getGoodsList() {
				let that = this
				uni.showLoading({
					title: '加载中...'
				})
				let Array = []
				that.classList.attribute.forEach(item => {
					item.value.forEach(items => {
						if (items.flag) {
							Array.push(items.name);
						}
					});
				});
				// 分类id
				//品牌id
				const barnkId = that.classList.brand.filter(item => item.checkedd).map(item => item.id);
				that.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						keywords: this.keywords,
						shop_id: that.$store.state.shop.id,
						cat_id: this.classId == 0 ? this.catId : this.classId, //分类id
						category_attribute: Array, //属性
						brand_id: barnkId, //品牌
						sort: this.sortType, //排序类型 人气views、最新createtime、价格price 、评分comment
						order: this.sort, //asc升序，desc倒叙
						page: this.page,
						index:'index'
					}
				}).then(res => {
					uni.hideLoading();
					if (res.data.code == 1) {
						if (this.page == 1) {
							this.childrenList = res.data.data.data;
						} else {
							this.childrenList.push(...res.data.data.data);
						}
						this.last_page = res.data.data.last_page;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 切换分类
			classStatus(item, index) {
				this.listIndex = index
				this.classId = item.id;
				this.catId = item.pid;
				// 筛选
				this.getSearch();
				this.page = 1;
				this.getGoodsList();
			},
			// 分页
			scrolltolower() {
				if (this.page < this.last_page) {
					this.page++;
					this.getGoodsList();
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	// 筛选弹窗
	.fixed {
		position: relative;
		z-index: 999;

		.bottom_box {
			width: 494upx;
			height: 76upx;
			background: #1b1b1b;
			border-radius: 38upx;
			border: 2upx solid #cd9c61;
			margin-left: 30upx;
			margin-bottom: 80rpx;

			.left_btn {
				width: 248upx;
				height: 76upx;
				border-radius: 38upx 0upx 0upx 38upx;
				color: #e4b77f;
				line-height: 76upx;
			}

			.right_btn {
				width: 248upx;
				height: 76upx;
				background: linear-gradient(154deg, #e4b77f 0%, #cd9c61 100%);
				border-radius: 0upx 38upx 38upx 0upx;
				line-height: 76upx;
				color: #ffffff;
			}
		}

		.scroll-YS {
			flex: 1;
			overflow-y:scroll;

			.right_popup_box {
				width: 526upx;
				padding-left: 32upx;

				.content_box2 {
					.bottom_list_box {
						margin-top: 18upx;
						height: 100%;
						padding-right: 32upx;

						.header_bot_txt {
							margin-bottom: 60upx;

							.content_list {
								margin-top: 34upx;
								flex-wrap: wrap;

								.content_list_box {
									width: 154upx;
									height: 52upx;
									background: #151515;
									border-radius: 26upx;
									color: rgba(255, 255, 255, 0.8);
									line-height: 52upx;
									margin-bottom: 20upx;
								}

								.content_list_box_active {
									width: 154upx;
									height: 52upx;
									background: #e4b77f;
									border-radius: 26upx;
									color: rgba(255, 255, 255, 0.8);
									line-height: 52upx;
									margin-bottom: 20upx;
								}
							}

							.left_txt {
								color: rgba(255, 255, 255, 0.8);
							}

							.genduo_txt {
								color: rgba(255, 255, 255, 0.8);
							}
						}
					}

					.goods_type_box {
						margin-top: 46upx;

						.goods_type_title {
							color: #ffffff;
						}

						.goods_type_list {
							margin-top: 34upx;
							flex-wrap: wrap;

							.lists_box {
								width: 154upx;
								height: 52upx;
								background: #151515;
								border-radius: 26upx;
								color: rgba(255, 255, 255, 0.8);
								line-height: 52upx;
								margin-right: 16upx;
								margin-bottom: 22upx;
							}

							.lists_box_active {
								width: 154upx;
								height: 52upx;
								background: #e4b77f;
								border-radius: 26upx;
								color: rgba(255, 255, 255, 0.8);
								line-height: 52upx;
								margin-right: 16upx;
								margin-bottom: 22upx;
							}
						}
					}

					.price_range_box {
						margin-top: 48upx;

						.price_range_title {
							color: #ffffff;
						}

						.price_range_box {
							margin-top: 34upx;

							.price_min_box {
								width: 214upx;
								height: 54upx;
								background: #151515;
								border-radius: 26upx;
								line-height: 54upx;
								color: #ffffff;
							}

							.xian {
								width: 22upx;
								height: 4upx;
								border-bottom: 2upx solid #8a8a8a;
								margin: 22upx 26upx 0 26upx;
							}

							.price_max_box {
								width: 214upx;
								height: 54upx;
								background: #151515;
								border-radius: 26upx;
								line-height: 54upx;
								color: #ffffff;
							}
						}
					}

					.header_box {
						width: 154upx;
						height: 52upx;
						background: #151515;
						border-radius: 26upx;
						line-height: 52upx;
						color: rgba(255, 255, 255, 0.8);
						margin-right: 24upx;
						border: 2upx solid #151515;
					}

					.header_box_active {
						width: 154upx;
						height: 52upx;
						background: rgba(231, 60, 51, 0.1);
						border-radius: 26upx;
						line-height: 52upx;
						color: rgba(255, 255, 255, 0.8);
						margin-right: 24upx;
						border: 2upx solid #e7b77d;
					}
				}
			}
		}
	}

	.classification {
		overflow: hidden;

		.tabbar {
			position: absolute;
		}

		.content_box {
			position: fixed;
			margin-top: 40upx;

			.left_scroll {
				width: 180upx;

				.scroll-Y {
					width: 180upx;
					overflow: hidden;
					background: #F4F5F9;
					border-radius: 0upx 20upx 0upx 0upx;

					::-webkit-scrollbar {
						width: 0;
						height: 0;
						color: transparent;
					}
				}

				.shu_box {
					width: 180upx;
					height: 110upx;
					background: #F4F5F9;
					border-radius: 0upx 20upx 20upx 0upx;
					color: #333333;
					line-height: 110upx;
				}

				.shu_box_active {
					width: 180upx;
					height: 110upx;
					background: #FFFFFF;
					border-radius: 0;
					color: #333333;
					line-height: 110upx;
					font-weight: bold;
				}
			}

			.right_box {
				margin-left: 30upx;

				.screen_list_box {
					padding-bottom: 10upx;
					background-color: #ffffff;
					box-sizing: border-box;
					justify-content: space-between;
					.list_box {
						.txt {
							color: #999999;
						}
						.active_txt {
							color: #333333;
						}

						.img {
							width: 32upx;
							height: 32upx;
							display: inline-block;
							margin-left: 4upx;
						}
					}
					.list_box:nth-child(1) {
						margin-left: 0;
					}
				}
				.scroll-Y {
					overflow: hidden;

					.ifcation_box {
						width: 536upx;

						.title_fd_box {
							.title_txt {
								color: #000000;
							}

							.gd_txt {
								color: #666666;
								margin-top: 6upx;
								position: absolute;
								right: 36upx;
							}
						}

						.goods_list_box {
							margin-top: 28rpx;
							border-bottom: 1rpx solid #F4F4F4;
							padding-bottom: 28rpx;
							display: flex;
							align-items: flex-start;
							.left_goods_box {
								width: 158rpx;
								height: 158rpx;
								background-color: #999;
								border-radius: 12px;
							}

							.right_goods_detail {
								margin-left: 20rpx;

								.goods_name_txt {
									color: #333333;
									width: 300rpx;
									font-size: 13px;
									line-height: 36rpx;
									font-family: PingFang SC;
									font-weight: 400;
									display: -webkit-box;
									overflow: hidden;
									white-space: normal;
									text-overflow: ellipsis;
									word-wrap: break-word;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}
								.goods_price_box {
									display: flex;
									align-items: flex-end;
									margin-top: 14rpx;
									.goods_price_left {
										color: #FF3F4A;
										font-family: PingFang SC;
										font-weight: 400;
										font-size: 14px;
									}
									.goods_price_right {
										color: #999999;
										margin-top: 6rpx;
										margin-left: 18rpx;
										text-decoration: line-through;
									}
								}

								.goods_sales_hp {
									margin-top: 12rpx;

									.sales_txt {
										color: #666;
									}

									.line_box {
										width: 2upx;
										height: 12upx;
										background-color: #CCCCCC;
										margin-top: 8rpx;
										margin-left: 20upx;
										margin-right: 20upx;
									}

									.hp_txt {
										color: #666;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>